import usePosition from "../hooks/usePosition";
import Arrow from "./Arrow";
import Offset from "./Offset";
import Position from "./Position";
import { FC, RefObject, useRef } from "react";

interface TooltipBodyProps {
  offset: Offset;
  position: Position;
  targetRef: RefObject<HTMLElement>;
}

const TooltipBody: FC<TooltipBodyProps> = ({
  children,
  offset,
  position,
  targetRef,
}) => {
  const contentRef = useRef<HTMLDivElement>(null);
  const anchorRef = useRef<HTMLDivElement>(null);

  usePosition(contentRef, targetRef, anchorRef, position, offset);

  return (
    <>
      <div ref={anchorRef} style={{ left: 0, position: "absolute", top: 0 }} />
      <div className="rpv-core__tooltip-body" ref={contentRef}>
        <Arrow
          customClassName="rpv-core__tooltip-body-arrow"
          position={position}
        />
        <div className="rpv-core__tooltip-body-content">{children}</div>
      </div>
    </>
  );
};

export default TooltipBody;
